<template>
  <div class="container">
    <div class="header clearfix">
      <img :src="ImgBaseUrl+'/mp_3.1.6/支付成功/支付成功图标/安卓/hdpi/支付成功.png'"
           alt
           v-if="ImgBaseUrl"
           class="success-icon" />
      <div class="msg">支付成功</div>
      <div class="btn-bar">
        <div class="btn red"
             @tap="tocheckOrder()">查看卡券</div>
      </div>
      <!-- <div class="btm-tip">
        请联系分公司结清尾款
      </div> -->
    </div>
  </div>
</template>
<script>
/**
 * 女王卡支付成功页面
 */
import common from "@/assets/js/mmk_common.js";
import shoplist from "@/components/shop_list/shop_list";
export default {
  data () {
    return {
      imgUrl: common.image_response,
      ImgBaseUrl: common.image_resource,
      mallList: [],
      order_price: 0
    };
  },
  onShow: function (options) {
    wx.setNavigationBarTitle({
      title: "订单支付"
    });
    wx.setNavigationBarColor({
      frontColor: "#333333", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#D8D8D8", //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
  },
  onLoad (options) {
    this.order_price = options.order_price || 0;
  },
  components: { shoplist },
  methods: {
    // 查看订单
    tocheckOrder () {
      // 跳转女神卡
      wx.redirectTo({ url: `/pages/package_main/advertisement/main?url=${encodeURIComponent(common.is_online ? 'https://h5.ameimeika.com/life_beauty/#/queenCardList' : 'https://h5s.ameimeika.com/life_beauty/#/queenCardList')}` });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: rgba(243, 244, 246, 1);
  overflow: auto;
  position: relative;
  .header {
    width: 100%;
    .success-icon {
      width: 70px;
      height: 70px;
      display: block;
      margin: 40px auto 0;
    }
    .msg {
      font-size: 14px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 20px;
      margin: 14px auto 0;
      text-align: center;
    }
    .order_price {
      margin: 6px auto 0;
      text-align: center;
      .icon {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 16px;
        display: inline-block;
        vertical-align: bottom;
      }
      .num {
        font-size: 20px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
        display: inline-block;
        vertical-align: bottom;
      }
    }
    .btn-bar {
      width: 106px;
      height: 38px;
      margin: 54px auto 40px;
      display: flex;
      justify-content: space-between;
      .btn {
        width: 106px;
        height: 38px;
        border-radius: 100px;
        font-size: 14px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        line-height: 38px;
        text-align: center;
        &.gray {
          background: rgba(242, 242, 242, 1);
          color: rgba(153, 153, 153, 1);
        }
        &.red {
          background: linear-gradient(
            226deg,
            rgba(254, 120, 161, 1) 0%,
            rgba(254, 123, 136, 1) 100%
          );
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
  .btm-tip {
    font-size: 14px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 20px;
    position: absolute;
    bottom: 153px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>

